<template>
	<view>
		
		<!-- 选择栏 -->
		<view class="choose-tab flex relative" :style="[{top:0 + 'px'}]">
			<view :class="['tab-item flex-sub',checked == index ? 'active':'']" v-for="(item,index) in tabbar"
				:key="index" @click="chooseTab(index)">
				{{item.name}}
			</view>
		</view>
		
		<view style="width:750rpx;height:116rpx;"></view>
		
		<!-- 数据列表 -->
		<view class="tab-title flex">
			<view class="item1">
				订单编号
			</view>
			<view class="item2">
				提成
			</view>
			<view class="item3">
				消费会员
			</view>
			<view class="item4">
				结算状态
			</view>
		</view>
		
		<view class="num-title flex" v-for="(item,index) in 6" :key="index">
			<view class="item1">
				201705142016
			</view>
			<view class="item2">
				$88
			</view>
			<view class="item3">
				微信昵称
			</view>
			<view class="item4">
				已结算
			</view>
		</view>
		
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				checked: 0, //选中下标
				tabbar: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '获取'
					},
					{
						id: 3,
						name: '消耗'
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
			chooseTab(index) {
				this.checked = index;
			},
			

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #eee;
	}
	
	.num-title{
		height:100rpx;
		border-bottom: 1rpx solid #eee;
		background-color: white;
		view{
			text-align: center;
			height:100rpx;
			line-height: 100rpx;
			font-size: 24rpx;
			color:#999999;
		}
		.item1{
			flex:1;
		}
		.item2{
			flex:1;
		}
		.item3{
			flex:1;
		}
		.item4{
			flex:1;
		}
	}
	
	.tab-title{
		height:100rpx;
		border-bottom: 1rpx solid #eee;
		background-color: white;
		view{
			text-align: center;
			height:100rpx;
			line-height: 100rpx;
		}
		.item1{
			flex:1;
		}
		.item2{
			flex:1;
		}
		.item3{
			flex:1;
		}
		.item4{
			flex:1;
		}
	}
	
	
	.choose-tab {
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		border-bottom: 2rpx solid #eee;
		z-index: 9999;
		line-height: 116rpx;
		text-align: center;
		color: #999999;
		position: fixed;
		left: 0;
	
		.tab-item {
			position: relative;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #999999;
		}
	
		.active {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #DC2D20;
		}
	}

	
	
</style>
